<!-- 底部弹窗组件（普通选择弹窗） -->
<!-- pop3001、pop3002 -->
<template>
  <view
    class="popup-bottom-select-wrapper"
    @click.stop="hide()"
    v-if="popupShow"
  >
    <view
      class="popup-box"
      :style="{ maxHeight: maxHeight + 'px', '--height': modalHeight }"
      @click.stop
    >
      <view class="popup-body">
        <!-- 自定义插槽 -->
        <slot></slot>

        <view class="popup-title" v-if="title">{{ title }}</view>

        <view class="popup-option-wrapper">
          <view
            class="popup-option"
            :class="{
              active: data && item[optionKey] === data[optionKey],
              disabled: item['disabled'],
            }"
            @click="select(item)"
            v-for="item in optionsValue"
            :key="item[optionKey]"
            v-if="optionsValue.length > 0"
          >
            {{ item[optionKey] }}
            <view class="sub-name" v-if="item['subName']">{{
              item["subName"]
            }}</view>
          </view>
          <view class="no-data" v-else>暂无数据</view>
        </view>
      </view>

      <view class="operation-btn-wrapper">
        <view class="operation-btn assist-btn" @click="hide()">
          {{ assistBtnText }}
        </view>
        <view class="divider" v-if="!singleBtn"></view>
        <view
          class="operation-btn main-btn"
          @click="operate()"
          v-if="!singleBtn"
        >
          {{ mainBtnText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";

/** props-组件属性 */
const props = defineProps({
  /** 默认选择 */
  value: {
    type: Object,
    default: null,
  },
  /** 标题 */
  title: {
    type: String,
    default: "",
  },
  /**
   * 选项
   * [{ name: '', value: '', subName: '', disabled: false }]
   * @param name 选项文本
   * @param value 选项值
   * @param subName 选项描述文本（可选）
   * @param disabled 是否可选（可选）
   * */
  options: {
    type: Array,
    default: () => {
      return [];
    },
  },
  /** 选项显示值的键名 */
  optionKey: {
    type: String,
    default: "name",
  },
  /** 是否单按钮（仅留副按钮） */
  singleBtn: {
    type: Boolean,
    default: false,
  },
  /** 副按钮默认文本 */
  assistBtn: {
    type: String,
    default: "",
  },
  /** 主按钮默认文本 */
  mainBtn: {
    type: String,
    default: "",
  },
  /** 自定义弹窗高度 */
  modalHeight: {
    type: Number,
    default: null,
  },
});

/** emit-组件事件 */
const emit = defineEmits(["operate", "close"]);

/** data-数据 */
// 弹窗显示
let popupShow = ref(false);
// 选项数据
let optionsValue = ref([]);
// 副按钮文本
let assistBtnText = ref("");
// 主按钮文本
let mainBtnText = ref("");
// 选择的数据
let data = ref(null);
// 弹窗最大高度
let maxHeight = ref(0);

assistBtnText.value = "取消";
mainBtnText.value = "确定";
const { windowHeight } = uni.getStorageSync("systemInfo");
maxHeight.value = windowHeight * 0.75;

/** 监听数据 */
watch(
  () => props.options,
  (newVal) => {
    optionsValue.value = newVal;
  },
  { immediate: true }
);

watch(
  () => props.assistBtn,
  (newVal) => {
    if (newVal) assistBtnText.value = newVal;
  },
  { immediate: true }
);

watch(
  () => props.mainBtn,
  (newVal) => {
    if (newVal) mainBtnText.value = newVal;
  },
  { immediate: true }
);

/** 显示弹窗 */
function show() {
  popupShow.value = true;
  data.value = props.value;
}

/** 关闭弹窗 */
function hide() {
  emit("close");
  if (popupShow.value) {
    popupShow.value = false;
    return true;
  } else {
    return false;
  }
}

/** 选择 */
function select(value) {
  if (value.disabled) return;
  data.value = value;
  /**
   * 单按钮时，点击选项直接进行操作
   * 双按钮时，点击选项后再点击主按钮进行操作
   */
  if (!props.singleBtn) return;

  operate();
}

/** 主按钮操作 */
function operate() {
  hide();
  emit("operate", data.value);
}

/** 暴露方法给外部使用 */
defineExpose({
  show,
  hide,
});
</script>

<style lang="scss" scoped>
.popup-bottom-select-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-bgColor);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 99999;

  .popup-box {
    position: relative;
    width: 100%;
    background: #f5f5f5;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    overflow: hidden;
    animation: fade-in 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    height: calc(var(--height) * 1rpx);

    .popup-body {
      flex: 1;
      background-color: #fff;
      margin-bottom: 20rpx;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;

      .popup-title {
        width: 100%;
        height: 110rpx;
        min-height: 110rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: var(--text-color);
        display: flex;
        align-items: center;
        padding: 0 40rpx;
      }

      .popup-option-wrapper {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
      }

      .popup-option {
        width: 100%;
        text-align: center;
        font-size: 28rpx;
        color: var(--text-color);
        padding: 32rpx 40rpx;
        box-sizing: border-box;
        line-height: 48rpx;
        word-break: break-all;
        transition: all 0.3s ease-in-out;

        .sub-name {
          font-size: 32rpx;
          font-weight: 400;
          color: var(--text-color-1);
          display: inline-block;
          word-break: break-all;
        }
      }

      .popup-option.active {
        color: var(--primary-color);
      }

      .popup-option.disabled {
        color: var(--text-color-1);
      }

      .no-data {
        font-size: 28rpx;
        color: var(--text-color);
        text-align: center;
        line-height: 60rpx;
      }
    }

    .popup-body::-webkit-scrollbar {
      display: none;
    }

    .operation-btn-wrapper {
      width: 100%;
      min-height: 110rpx;
      display: flex;
      align-items: center;
      background-color: #fff;

      .operation-btn {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
      }

      .assist-btn {
        color: var(--text-color);
      }

      .main-btn {
        color: var(--primary-color);
      }

      .divider {
        width: 1rpx;
        height: 70rpx;
        background-color: var(--divider-color);
      }
    }
  }
}

@keyframes fade-in {
  from {
    transform: translateY(50rpx);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
